import React, { useState } from "react";
import { View, Image, Text, Button } from "@tarojs/components";
import Taro from "@tarojs/taro";
import mockData from "./mock-data";

import styles from "./index.module.scss";
import MiniHeader from "@/components/UI/MiniHeader";

import Indexes from "@/components/UI/Indexes";
import cn from "@/utils/classnames";

export default function() {
  let [title, setTitle] = useState("测评报告");
  let [selectList, setSelectList] = useState([]);

  return (
    <View className={styles.page}>
      <MiniHeader title={title} transparent={false} hideHome></MiniHeader>
      <View className={styles.pageContent}>
        <View style="height: 100%;">
          <Indexes
            contentClass={styles.contentClass}
            list={mockData}
            renderCell={a => {
              return (
                <View
                  className={cn(styles.item, {
                    [styles.select]: selectList.includes(a.name),
                  })}
                  onClick={() => {
                    let copyList = [...selectList];
                    if (copyList.includes(a.name)) {
                      copyList.splice(copyList.indexOf(a.name), 1);
                    } else {
                      copyList.push(a.name);
                    }
                    setSelectList(copyList);
                  }}
                >
                  {a.name}
                </View>
              );
            }}
          >
            <View className="custom-area">用户自定义内容</View>
          </Indexes>
        </View>
      </View>
    </View>
  );
}
